<template>
  <view class="root-container">
    <view class="container">
      <view class="reminder">
        <view class="title">请选择你的角色</view>
        <view class="subtitle">角色可以切换</view>
      </view>
      <view class="location-info" @click="handleChangeCity">
        <view class="city-name"> 当前城市: </view>
        <view class="current-city">
          {{ cityName }}
          <u-icon name="arrow-right" color="#000" size="28rpx"></u-icon>
        </view>
      </view>

      <view
        class="role-switch-item"
        @click="switchRole('/pages/beforeLogin/userLogin', 'mini')"
      >
        <image :src="`${baseImgUrl}单位负责人居民.png`"></image>
        <view class="role-item">我是单位负责人/居民</view>
        <view class="interpretation">信息申报、整改回执...</view>
      </view>

      <view
        class="role-switch-item"
        @click="
          switchRole('/pages/beforeLogin/assistantOfficerLogin?type=1', 'fj')
        "
      >
        <image :src="`${baseImgUrl}辅警.png`"></image>
        <view class="role-item">我是辅警</view>
        <view class="interpretation">信息采集、线索上报...</view>
      </view>

      <view
        class="role-switch-item"
        @click="
          switchRole('/pages/beforeLogin/assistantOfficerLogin?type=2', 'wgy')
        "
      >
        <image :src="`${baseImgUrl}网格员.png`"></image>
        <view class="role-item">我是网格员</view>
        <view class="interpretation">信息采集、建言献策...</view>
      </view>
    </view>

    <yy-change-city
      ref="changeCityRef"
      :city="locationInfo.city"
    ></yy-change-city>
  </view>
</template>

<script>
import { setRole, baseImgUrl } from "../../config";
import {
  Toast,
  errorToast,
  getLocation,
  getLocationInfo,
  parseJson,
} from "../../utils/util";
import { mapState } from "vuex";

export default {
  data() {
    return {
      baseImgUrl,
      changeCityRef: null,
      locationInfo: {},
    };
  },
  computed: {
    cityName() {
      const cityInfo = this.cityInfo;
      return cityInfo.name || "请选择城市";
    },
    ...mapState(["cityInfo"]),
  },
  onShow() {
    // 检测如果没有用户位置信息，则让用户选择

    const cifyInfo = uni.getStorageSync("cityInfo");
    if (typeof cityInfo !== "object") {
      uni.showLoading({
        title: "正在获取当前位置信息，请稍等！",
      });
      getLocationInfo()
        .then((res) => {
          this.locationInfo = res;
          // 获取到位置信息之后，
          this.$nextTick(() => {
            // 如果没有选择则让用户选择
            this.$refs.changeCityRef.show();
          });
        })
        .finally(() => {
          uni.hideLoading();
        })
        .catch((err) => {
          errorToast("位置信息获取失败，请开启手机定位后重试！");
        });
    }
  },
  onLoad() {},
  mounted() {},
  methods: {
    switchRole(url, role) {
      const cifyInfo = uni.getStorageSync("cityInfo");
      console.log(typeof cityInfo, "kdsldk");
      const cityInfoObj = cifyInfo;
      if (typeof cityInfoObj !== "object") {
        errorToast("请先选择城市！");
        return;
      }
      console.log(cityInfoObj);
      // 检测当前城市，是否在城市选择的列表中
      let citys = this.$refs.changeCityRef.cityList.map((item) => item.name);
      if (!citys.includes(cityInfoObj.name)) {
        Toast("当前城市暂未开通，请手动切换城市！");
        return;
      }
      uni.clearStorageSync();
      uni.setStorageSync("cityInfo", cifyInfo);

      setRole(role);
      uni.navigateTo({
        url,
      });
    },
    checkOpen() {
      let citys = this.$refs.changeCityRef.cityList.map((item) => item.name);
      console.log(citys);
      return citys.includes(this.cityName);
    },
    handleChangeCity() {
      this.$refs.changeCityRef.show();
    },
  },
};
</script>

<style scoped lang="scss">
.root-container {
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.reminder {
  position: absolute;
  top: 55rpx;
  left: 34rpx;

  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }

  .subtitle {
    font-size: 24rpx;
    color: #aaaaaa;
    margin-top: 15rpx;
  }
}

.location-info {
  position: absolute;
  top: 42rpx;
  right: 32rpx;
  display: flex;
  align-items: center;

  .city-name {
    font-weight: 400;
    font-size: 24rpx;
    color: #aaaaaa;
  }

  .current-city {
    background: #f3f3f3;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    border: 1rpx solid #e5e5e5;
    padding: 4rpx 17rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
    display: flex;
    align-items: center;
    margin-left: 27rpx;
  }
}

.role-switch-item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 648rpx;
  height: 160rpx;
  background: #f5f5f5;
  border-radius: 100rpx 8rpx 4rpx 2rpx;
  position: relative;
  font-family: PingFang SC, PingFang SC;
  padding: 35rpx 0 24rpx 216rpx;
  margin-bottom: 80rpx;

  image {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 206rpx;
    height: 206rpx;
  }

  .role-item {
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
  }

  .interpretation {
    width: fit-content;
    background: #e5e5e5;
    border-radius: 20rpx;
    border: 1rpx solid #e2e0e0;
    font-size: 24rpx;
    color: #aaaaaa;
  }
}
</style>
